<template>
  <div>
    <h1>字典类型详情页</h1>
    <p>字典类型: {{ type }}</p>
    <div>
<el-form :model="search" style=" margin: 20px 0 0 20px;" ref="search" label-width="100px">
  <el-row>
    <el-col :span="6" style=" margin-right: 20px;">
      <el-form-item label="标签">
        <el-input v-model="search.Label" placeholder="请输入字典标签" style="width: 100%;"/>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="状态">
        <el-select v-model="search.Status" placeholder="请选择" style="width: 100%;">
          <el-option label="正常" value="true"></el-option>
          <el-option label="停用" value="false"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="2">
      <el-button class="cz" type="primary" @click="clear()">重置</el-button>
    </el-col>
    <el-col :span="2">
      <el-button class="cx" type="primary" @click="query()">查询</el-button>
    </el-col>
  </el-row>
</el-form>
</div>
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="add(type)">新增</el-button></div>
<div id="dataDiv">
      <el-table :data="data" class="bian">
        <el-table-column label="序号" prop="d_DDictionaryId"></el-table-column>
        <el-table-column label="字典标签" prop="d_DDictionaryLabel"></el-table-column>
        <el-table-column label="字典键值" prop="d_DKeyValue"></el-table-column>
        <el-table-column label="字典排序" prop="d_DOrder"></el-table-column>
        <el-table-column label="状态" prop="d_DStatus" :formatter="formatStatus"></el-table-column>
        <el-table-column label="备注" prop="d_DRemarks"></el-table-column>
        <el-table-column label="创建时间" prop="d_DCreationTime"></el-table-column>
        <el-table-column label="类型" prop="d_DType" v-if="showIdInput"></el-table-column>
        <el-table-column label="逻辑删除" prop="d_DIsDelete" v-if="showIdInput"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="upd(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
    </div>
    <!-- 模态框部分 -->
    <!-- 添加页面 -->
  <el-dialog title="新增" :visible.sync="insert" width="50%">
  <el-form :model="insertAdd" ref="insertFrom" label-width="100px">
    <el-row>
      <el-col :span="12">
        <span class="xin">*</span><el-form-item label="字典标签" prop="Label">
          <el-input v-model="insertAdd.Label"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="xinx"> 
        <el-form-item label="字典键值" prop="KeyValue">
          <el-input v-model="insertAdd.KeyValue"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
        <el-form-item label="字典排序" prop="Order">
          <el-input v-model="insertAdd.Order"></el-input>
        </el-form-item>
      </el-col>
<el-col :span="12">
  <el-form-item label="状态" prop="Status">
    <el-radio-group v-model="insertAdd.Status">
      <el-radio :label="true">启用</el-radio>
      <el-radio :label="false">停用</el-radio>
    </el-radio-group>
  </el-form-item>
</el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
        <el-form-item label="类型" prop="Type">
          <el-input v-model="insertAdd.Type" readonly></el-input>
        </el-form-item>
      </el-col>
      </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="Remarks">
          <el-input type="textarea" v-model="insertAdd.Remarks" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col>
        <el-button class="cz" @click="cancel()">取消</el-button>
        <el-button class="cx" @click="addFrom('insertFrom')">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>
<!-- 修改页面-->
  <el-dialog title="编辑" :visible.sync="uinsert" width="50%">
  <el-form :model="insertUpd" ref="insertFrom" label-width="100px">
   <el-row v-if="showIdInput">
  <el-col :span="12">
    <el-form-item label="序号" prop="id">
      <el-input v-model="insertUpd.id"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="逻辑删除" prop="isDelete">
      <el-input v-model="insertUpd.isDelete"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="创建时间" prop="CreationTime">
      <el-input v-model="insertUpd.CreationTime"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
        <el-form-item label="类型" prop="Type">
          <el-input v-model="insertAdd.Type"></el-input>
        </el-form-item>
      </el-col>
</el-row>
    <el-row>
      <el-col :span="12">
        <span class="xin">*</span><el-form-item label="字典标签" prop="Label">
          <el-input v-model="insertUpd.Label"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12" class="xinx">
        <el-form-item label="字典键值" prop="KeyValue">
          <el-input v-model="insertUpd.KeyValue"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
        <el-form-item label="字典排序" prop="Order">
          <el-input v-model="insertUpd.Order"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
  <el-form-item label="状态" prop="Status">
    <el-radio-group v-model="insertUpd.Status">
      <el-radio :label="true">启用</el-radio>
      <el-radio :label="false">停用</el-radio>
    </el-radio-group>
  </el-form-item>
</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="Remarks">
          <el-input type="textarea" v-model="insertUpd.Remarks" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col>
        <el-button class="cz" @click="cancel()">取消</el-button>
        <el-button class="cx" @click="updFrom('insertFrom')">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {
     data(){
        return{
            data:[
                { d_DStatus: true },
                { d_DStatus: false },
            ],
            insert:false,
            uinsert:false,
            showIdInput: false,
            search:{
                Label:'',
                Status:'',
            },
            insertAdd:{
              Label:"",
              KeyValue:"",
              Order:"",
              Status:true,
              Type:"",
              Remarks:"",
            },
            insertUpd:{
              id:0,
              Label:"",
              KeyValue:"",
              Order:"",
              Status:true,
              Type:"",
              CreationTime:"",
              Remarks:"",
              isDelete:"",
            },
        }
     },
      methods:{
fill(){
    axios.get('http://localhost:5084/api/Subordinate/FenYe',{
        params: {
          type: this.type, 
       }
        })
          .then(res => {
            this.data = res.data;
            console.log(this.type);
            //this.totalRecords = res.data.length;
            //this.totalPages = Math.ceil(this.totalRecords / this.pageSize); // 计算总页数
          })
       },
       //模糊查询
      query() {
  // 查询数据逻辑
  const { Label, Status } = this.search;
  // 将状态值转换为布尔类型
  let statusValue;
  if (Status === 'true') {
    statusValue = true;
  } else if (Status === 'false') {
    statusValue = false;
  }

  axios.get('http://localhost:5084/api/Subordinate/FenYe', {
    params: {
      Label:Label,
      Status: statusValue,
      type: this.type, 
    } 
  }).then((response) => {
    this.data = response.data;
  }).catch((error) => {
    console.log(error);
  });
},
add(type) {
  this.insert = true;

  this.insertAdd.Type=this.type;
},
//添加
 addFrom(insertFrom) {
    var t = this;
    this.$refs[insertFrom].validate((valid) => {
      if (valid) {
        axios.post("http://localhost:5084/api/Subordinate", {
            d_DDictionaryLabel: t.insertAdd.Label,
            d_DKeyValue: t.insertAdd.KeyValue,
            d_DStatus:t.insertAdd.Status,
            d_DOrder: t.insertAdd.Order,
            d_DRemarks: t.insertAdd.Remarks,
            d_DType: t.insertAdd.Type,
          })
          .then(res => {
            if (res) {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.insert = false;
              t.fill();
                 // 清空表单数据
            this.insertAdd.Label = '';
            this.insertAdd.Type = '';
            this.insertAdd.KeyValue = '';
            this.insertAdd.Order = '';
            this.insertAdd.Status = '';
            this.insertAdd.Remarks = '';
            }
          })
          .catch(err => {
            this.$message({
              message: '添加失败！',
              type: 'error'
            });
          });
      }
    });
  },
  upd(row){
  this.uinsert = true;

  this.insertUpd.id=row.d_DDictionaryId;
  this.insertUpd.Label=row.d_DDictionaryLabel;
  this.insertUpd.Type=row.d_DType;
  this.insertUpd.KeyValue=row.d_DKeyValue;
  this.insertUpd.Status=row.d_DStatus;
  this.insertUpd.CreationTime=row.d_DCreationTime;
  this.insertUpd.isDelete=row.d_DIsDelete;
  this.insertUpd.Remarks=row.d_DRemarks;
  this.insertUpd.Order=row.d_DOrder;
  
},
//修改
updFrom: function () {
  var t = this;
  var tt={
    d_DDictionaryLabel: t.insertUpd.Label,
    d_DKeyValue:t.insertUpd.KeyValue,
    d_DStatus: t.insertUpd.Status,
    d_DOrder: t.insertUpd.Order,   
    d_DCreationTime: t.insertUpd.CreationTime,
    d_DRemarks: t.insertUpd.Remarks,
    d_DIsDelete: t.insertUpd.isDelete,
    d_DType: t.insertUpd.Type,
  };
  // 调用修改接口，将this.xxx作为请求的数据发送给后端
  axios.put("http://localhost:5084/api/Subordinate",{
    d_DDictionaryId:t.insertUpd.id,
    d_DDictionaryLabel: t.insertUpd.Label,
    d_DKeyValue:t.insertUpd.KeyValue,
    d_DStatus: t.insertUpd.Status,
    d_DOrder: t.insertUpd.Order,   
    d_DCreationTime: t.insertUpd.CreationTime,
    d_DRemarks: t.insertUpd.Remarks,
    d_DIsDelete: t.insertUpd.isDelete,
    d_DType: t.insertUpd.Type,
  })
    .then(res => {
      if (res) {
        this.$message({
          message: '修改成功！',
          type: 'success'
        });
        this.uinsert = false; // 关闭修改页面
        t.fill(); // 重新填充销售机会列表
      }
    })
    .catch(err => {
      this.$message({
        message: '修改失败！',
        type: 'error'
      });
      console.info(tt);
    });
},
   //点击按钮删除
  del: function (sale) {
    if (confirm("确定删除吗")) {
        var t = this;
        axios.put(`http://localhost:5084/api/Subordinate/UpdIsDelete?id=${sale.d_DDictionaryId}&&isDeleted=${false}`)
            .then(function (response) {
                // 根据后台返回的结果处理相应逻辑
                if (response.data > 0) {
                    alert("删除成功");
                    t.fill(); // 如果删除成功，重新加载数据
                } else {
                    alert("删除失败");
                }
            })
            .catch(function (error) {
                console.error(error);
                alert("删除失败");
            });
    }
},
clear() {
    // 清空搜索条件
  this.search.Label = '';
  this.search.Status = '';
  // 重新调用查询方法，以获取所有数据
  this.query();
  },
  formatStatus(row, column, cellValue) {
                return cellValue ? '正常' : '停用';
                },
      },
       props: ['type'], 
      mounted: function () {
    this.fill();
 }
};
</script>
<style scoped>
.cz
{
margin-right: 20px; 
width: 80px; 
height: 40px; 
background-color: white; 
color: black;
border-color: #C1C1C1;
margin-left: 20px;
}
.cx
{
   width: 80px;
   height: 40px; 
   color: white;
   background-color: #45B984; 
}
.bian
{
    margin:20px;
}
 .el-dialog {
    max-height: 70%;
  }
  .xin{
  white:1px;
  height:1px;
  color: red;
  position: relative;
  left: 19px; /* 根据需要调整星号的水平位置 */
  top: 32px; /* 根据需要调整星号的垂直位置 */
}
.xinx{
  position: relative;
  left: 0px; /* 根据需要调整星号的水平位置 */
  top: 20px; /* 根据需要调整星号的垂直位置 */
}
</style>